/**
 * Descriptions：
 * <p>
 * Author：ChenME
 * Date：2017/6/29
 * Email：ibelieve1210@163.com
 */

import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity,
} from 'react-native';

import Dimensions from 'Dimensions';
var {width} =Dimensions.get('window');

export default class MidCommView extends Component {

    static defaultProps = {
        title: '',
        subTitle: '',
        titleColor: '',
        iconName: '',
        tplurl: '',//下级界面URL的路径
        callbackClickCell: null,
    };


    render() {
        return (
            <TouchableOpacity
                activeOpacity={0.7}
                onPress={()=> {
                    this.clickCell({
                        title: this.props.title,
                        detailUrl: this.props.tplurl,
                    });
                }}
            >
                <View style={styles.midCommViewStyle}>
                    <View>
                        <Text
                            style={[styles.titleStyle, {color: this.props.titleColor}]}
                        >{this.props.title}</Text>
                        <Text style={styles.subTitleStyle}>{this.props.subTitle}</Text>
                    </View>
                    <Image
                        source={{uri: this.props.iconName}}
                        style={styles.rightIconStyle}
                    />
                </View>
            </TouchableOpacity>
        );
    }

    // 点击了cell
    clickCell(data) {
        // 判断处理
        if (this.props.callbackClickCell == null) return;
        // 执行回调函数
        this.props.callbackClickCell(data);
    }

}

const styles = StyleSheet.create({
    midCommViewStyle: {
        backgroundColor: '#fff',
        width: width / 2 - 0.5,
        height: 59,
        flexDirection: 'row',
        alignItems: 'center',
        marginBottom: 1,
        justifyContent: 'space-between',
        paddingHorizontal: 10,
    },
    titleStyle: {
        fontSize: 18,
        fontWeight: 'bold',
    },
    subTitleStyle: {
        color: 'gray',
    },
    rightIconStyle: {
        width: 74,
        height: 53,
        resizeMode: 'contain',
    },
});
